<template>
	<view class="container">
		<custom-header title="蜂探文案伴侣" show-bg-color></custom-header>
		<view class="layout">
			<view class="list">
				<view class="item">
					<image class="avatar" src="/static/images/icon_robot.png"></image>
					<text class="content" user-select>您好，请问有什么可以帮助您的？您好，请问有什么可以帮助您的？您好，请问有什么可以帮助您的？</text>
				</view>
				<view class="item reverse">
					<image class="avatar" src="/static/images/icon_robot.png"></image>
					<text class="content" user-select>我的会员用不了？该怎么办？</text>
				</view>
			</view>
			<view class="input-layout" :style="{bottom: inputBottom + 'px'}">
				<textarea
				    class="input-box"
				    placeholder="请输入您的问题…"
				    auto-height
				    fixed
				    :show-confirm-bar="false"
				    :adjust-position="false"
					@focus="onInputFocus"
					@blur="onInputBlur"
				  />
				<image class="icon" src="/static/images/icon_send.png"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	const inputBottom = ref(0);
	const onInputFocus = (e) => {
		let { height } = e.detail;
		inputBottom.value = height;
	}
	const onInputBlur = (e) => {
		resetInputBottom();
	}
	const resetInputBottom = () => {
		inputBottom.value = uni.upx2px(32);
	}
	onLoad(() => {
		resetInputBottom();
	})
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #F3F8FF;
		.layout {
			flex-grow: 1;
			overflow: auto;
			padding: 50rpx 48rpx 0 48rpx;
			// margin-bottom: 132rpx;
			display: flex;
			flex-direction: column;
			.list {
				display: flex;
				flex-direction: column;
				gap: 32rpx;
				padding-bottom: 140rpx;
			
				.item {
					display: flex;
					align-items: center;
					gap: 28rpx;
			
					.content {
						min-height: 88rpx;
						background-color: white;
						border-radius: 44rpx;
						padding: 30rpx 28rpx;
						font-size: 28rpx;
						line-height: 1.5;
						color: #333;
						font-weight: 400;
					}
				}
			
				.reverse {
					flex-direction: row-reverse;
				}
			}
			
			.input-layout {
				position: fixed;
				left: 32rpx;
				right: 32rpx;
				bottom: 32rpx;
				min-height: 88rpx;
				border-radius: 44rpx;
				background-color: white;
				padding: 0 36rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 24rpx;
			
				.input-box {
					font-size: 28rpx;
					color: #999;
					font-weight: 400;
					line-height: 1.3;
					-webkit-transform: translate3d(0, 0, 0);
				}
			
				.icon {
					width: 56rpx;
					height: 56rpx;
				}
			}
			
		}
		.avatar {
			width: 80rpx;
			height: 80rpx;
			flex-shrink: 0;
		}
	}
</style>